<template>
  <div>

    <h3 align="center">笔试筛选</h3>
    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keyWord" style="width: 10%"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
    <el-table :data="applyList" style="width: 100%">

      <el-table-column label="招聘者编号">
        <!-- 插槽，和迭代变量一个意思-->
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="招聘者姓名">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="招聘者性别">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applySex }}</span>
        </template>
      </el-table-column>

      <el-table-column label="招聘者出生日期">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyBir }}</span>
        </template>
      </el-table-column>

      <el-table-column label="招聘者电话">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyPhone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="招聘者学历">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyEducation }}</span>
        </template>
      </el-table-column>K

      <el-table-column label="招聘者邮箱地址">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyEmail }}</span>
        </template>
      </el-table-column>

      <el-table-column label="应聘岗位">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyJob }}</span>
        </template>
      </el-table-column>

      <el-table-column label="应聘时间">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="应聘状态">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.applyStatus }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="send(scope.row)">下一轮</el-button><br>
          <el-button size="mini" type="danger" @click="obsolete(scope.row)">感谢信</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <!-- page-size 默认每页显示条数-->
      <el-pagination @size-change="selectPage" @current-change="handleCurrentChange" :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]" :page-size="rows" layout="jumper,total, sizes, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="发送邮件" :visible.sync="isShow" width="30%">
      <el-form ref="form" label-width="80px">
        <el-col :span="22">
          <el-input v-model="message"></el-input>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">发 送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "applyList02",
    data() {
      return {
        applyList: [],
        title: "发送邮件",
        isShow: false,
        message: "",
        keyWord: "",
        applyForm: { //表单请求对象
          applyId: null,
          applyName: "",
          applySex: "",
          applyBir: "",
          applyPhone: "",
          applyEducation: "",
          applyEmail: "",
          applyJob: "",
          applyDate: "",
          applyStatus: ""
        },
        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1, //当前页
        rows: 5, //每页显示条数,
      }
    },

    methods: {
      loaddata() { //加载数据
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/apply/list02",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows,
            "keyWord": mythis.keyWord,
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.applyList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage
          }
        })
      },

      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },

      handleCurrentChange(v) { //当前页触发事件
        this.curPage = v;
        this.loaddata();
      },

      obsolete(x) {
        //显示模态框
        this.isShow = true;
        //把选中的值赋值给模态框的表单元素
        this.applyForm.applyEmail = x.applyEmail;
        this.message = "对不起，你的笔试并未通过！ 您的简历已进入我司人才库，后续若出现合适的招聘需求，我们将优先与您联系。";

        this.applyForm.applyId = x.applyId;
        this.applyForm.applyName = x.applyName;
        this.applyForm.applySex = x.applySex;
        this.applyForm.applyBir = x.applyBir;
        this.applyForm.applyPhone = x.applyPhone;
        this.applyForm.applyEducation = x.applyEducation;
        this.applyForm.applyEmail = x.applyEmail;
        this.applyForm.applyJob = x.applyJob;
        this.applyForm.applyDate = x.applyDate;
        this.applyForm.applyStatus = "人才库";
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/apply/update",
          type: "get",
          data: mythis.applyForm,
          dataType: "json",
          success: function(data) {

          }
        })
      },

      send(x) {
        //显示模态框
        this.isShow = true;
        //把选中的值赋值给模态框的表单元素
        this.applyForm.applyEmail = x.applyEmail;
        this.message = "你的笔试已通过，进入面试！";

        this.applyForm.applyId = x.applyId;
        this.applyForm.applyName = x.applyName;
        this.applyForm.applySex = x.applySex;
        this.applyForm.applyBir = x.applyBir;
        this.applyForm.applyPhone = x.applyPhone;
        this.applyForm.applyEducation = x.applyEducation;
        this.applyForm.applyEmail = x.applyEmail;
        this.applyForm.applyJob = x.applyJob;
        this.applyForm.applyDate = x.applyDate;
        this.applyForm.applyStatus = "笔试通过";
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/apply/update",
          type: "get",
          data: mythis.applyForm,
          dataType: "json",
          success: function(data) {

          }
        })
      },

      saveInfo() { //保存

        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/apply/sendEmail",
          type: "post",
          data: {
            "email": mythis.applyForm.applyEmail,
            "message": mythis.message
          },
          dataType: "json",
          contentType: "application/x-www-form-urlencoded",
          success: function(data) {
            console.log(data)
            //alert(data.info);
            //mythis.$alert(data.info)
            mythis.$message(data.info)
            if (data.info == "发送成功") {
                mythis.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                mythis.isShow = false;
                //刷新
                mythis.loaddata();

            }
          }
        })
      },

      search() {
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/apply/list",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows,
            "keyWord": mythis.keyWord,
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.applyList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage
          }
        })
      }

    },

    mounted() {
      this.loaddata();
      console.log(this.$route.query.info)
    }
  }
</script>

<style>
</style>
